<template>

  <div class="page">

    <el-row>

      <el-col :span="18" :offset="3">

        <el-row :gutter="20">

          <el-col :span="16" style="height: 10vh; display: flex; align-items: center; font-size: 28px; font-weight: 700; color: #333">
            请观察摄像头区域是否正常！
          </el-col>

          <el-col :span="8" style="display: flex; align-items: center; justify-content: flex-end; height: 10vh">
            <el-button type="primary" @click="closeWindow">我已调试完毕，关闭页面</el-button>
          </el-col>

          <el-col :span="12">
            <el-card style="height: 80vh">
              <tracking-cam
                :tracking="false"
                @started="camSuccess = true"
                @error="camSuccess=false"/>

              <el-alert
                v-if="camSuccess!=null && camSuccess"
                :closable="false"
                style="margin-top: 20px"
                title="摄像头检测通过！"
                type="success"
                show-icon
              />

              <el-alert
                v-if="camSuccess!=null && !camSuccess"
                :closable="false"
                style="margin-top: 20px"
                title="摄像头存在异常，请参考右侧调试步骤!"
                type="error"
                show-icon
              />

            </el-card>

          </el-col>

          <el-col :span="12">

            <el-card style="height: 80vh; display: flex; line-height: 35px; flex-wrap: wrap; flex-direction: row; color: #555">
              <h3>请按以下步骤来调试您的设备！</h3>
              <div>1.推荐使用Chrome谷歌浏览器、Firefox火狐浏览器；如果使用360浏览器等国产浏览器，请使用极速模式。</div>
              <div>2.请关闭你电脑的杀毒软件，并刷新页面</div>
              <div>3.是否在地址栏左侧允许了摄像头/麦克风的授权？</div>
            </el-card>

          </el-col>
        </el-row>

      </el-col>

    </el-row>

  </div>

</template>

<script>

import TrackingCam from '@/components/TrackingCam/index.vue'

export default {
  components: { TrackingCam },
  data() {
    return {
      camSuccess: null
    }
  },
  created() {

  },

  methods: {

    closeWindow() {
      window.close()
    }
  }
}
</script>

<style scoped>
  .page {
    height:100vh;overflow: hidden;
    background: url("../../../assets/web/images/bigbg.png") 100%;
  }
</style>
